<template>
	<div class="shishishipin">
		<div class="shishishipin1">
			<div class="shishishipin1_1">
				<ul>
					<li v-for="(item,index) in shijian" :key="index">
						{{item.name}}
					</li>
				</ul>
			</div>
			<div class="shishishipin1_2">
				数据更新于19分钟前
			</div>
		</div>
		
		<div class="shipinbiao">
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>排名</th>
						<th>视频</th>
						<th></th>
						<th>达人</th>
						<th>发布时间</th>
						<th>当日新增播放</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in 10" :key="index">
						<td>
							<img v-if="index==0" src="../../../assets/img/jinpai.png" />
							<img v-else-if="index==1" src="../../../assets/img/yinpai.png" />
							<img v-else-if="index==2" src="../../../assets/img/tongpai.png" />
							<span v-else>{{index+1}}</span>
						</td>
						<td>
							<img src="../../../assets/img/guaiwu.png" />
						</td>
						<td>
							盘王者峡谷完整版视频，一个人捣盘王者峡谷完整版视频，一个人捣盘王者峡谷完整版视频，一个人捣
						</td>
						<td>
							<div class="touming">
								<img src="../../../assets/img/bibi.png" />
								<span>大丫鬟</span>
							</div>
						</td>
						<td>
							2020-10-27  17:42:09
						</td>
						<td>
							{{biaoshu | guolv}}
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="fenye" style="text-align: center;">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :hide-on-single-page="yindi"
			  :current-page="currentPage4"
			  :page-sizes="[100, 200, 300, 400]"
			  :page-size="100"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="4001">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default{
		name:"shishishipin",
		data(){
			return{
				biaoshu:12389121,
				shijian:[
					{name:'最新'},
					{name:'6小时'},
					{name:'12小时'},
					{name:'24小时'},
					{name:'近3天'},
					{name:'近7天'},
				],
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1
			}
		},
		activated() {
			
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			$(".shishishipin1_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color": "#fff",
					"border-radius":"0.05rem" ,
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color": "#0091FF",
					"border-radius":"0rem" ,
				})
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shishishipin{
		padding: 0.8rem;
		background-color: #fff;
		border-radius:0.1rem ;
		.shishishipin1{
			
			.shishishipin1_1{
				float: left;
				ul{
					list-style: none;
					li{
						transition: all 0.2s ease;
						cursor: pointer;
						float: left;
						border: 1px solid #D4D4D4;
						border-left:none ;
						color: #0091FF;
						font-size: 0.4rem;
						padding: 0.15rem 0.4rem;
					}
					li:nth-of-type(1){
						border-left:1px solid #D4D4D4 ;
						background-color: #0091FF;
						color: #fff;
						border-radius:0.05rem ;
					}
				}
			}
			.shishishipin1_2{
				line-height: 0.8rem;
				float: left;
				color: #666666;
				font-size: 0.4rem;
				margin-left:1rem ;
			}
		}
		.shishishipin1::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.shipinbiao{
			margin-top:1rem ;
			
			table{
				width: 100%;
				th{
					color: #333333;
					font-size: 0.5rem;
					padding-bottom: 1.2rem;
					font-weight: normal;
				}
				td{
					padding: 0.4rem 0;
					text-align: center;
					color: #666;
					font-size: 0.4rem;
				}
				td:nth-of-type(1){
					text-align: center;
					img{
						width: 0.8rem;
					}
				}
				td:nth-of-type(2){
					text-align: center;
					img{
						width: 4rem;
					}
				}
				td:nth-of-type(3){
					width: 9rem;
					line-height: 2.5rem;
					 white-space:nowrap;//禁止换行
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box; 
					-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
					-webkit-box-orient: vertical;
				}
				td:nth-of-type(4){
					.touming{
						width: 3rem;
						margin: auto;
						display: flex;
						align-items: center;
						img{
							width: 0.8rem;
						}
						span{
							margin-left:0.2rem ;
							flex: 1;
							text-align: left;
						}
					}
				}
			}
		}
		.fenye{
			text-align: center;
		}
	}
</style>
